<template>
  <div class="label3d-panel">
    <div class="panel-title">3D标牌</div>
    <el-form label-position="left" label-width="80px" size="small">
      <el-form-item label="标题">
        <el-input v-model="properties.style.text" placeholder="请输入标题" />
      </el-form-item>

      <el-form-item label="3DPoi样式">
        <el-select v-model="properties.mode" class="full-width">
          <el-option
            v-for="item in poi3DTypeOptions"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="标牌颜色">
        <div class="color-picker-container">
          <el-color-picker v-model="properties.style.UI_Color" :teleported="false" />
          <el-input v-model="properties.style.UI_Color" class="color-input" />
        </div>
      </el-form-item>

      <el-form-item label="主体颜色">
        <div class="color-picker-container">
          <el-color-picker v-model="properties.style.FX_Color" :teleported="false" />
          <el-input v-model="properties.style.FX_Color" class="color-input" />
        </div>
      </el-form-item>

      <el-form-item label="尺寸">
        <div class="size-inputs">
          <el-input-number
            v-model="properties.scale[0]"
            :min="0.1"
            :max="100"
            :step="0.1"
            :precision="1"
            :controls="false"
            class="size-input"
          />
          <el-input-number
            v-model="properties.scale[1]"
            :min="0.1"
            :max="100"
            :step="0.1"
            :precision="1"
            :controls="false"
            class="size-input"
          />
          <el-input-number
            v-model="properties.scale[2]"
            :min="0.1"
            :max="100"
            :step="0.1"
            :precision="1"
            :controls="false"
            class="size-input"
          />
        </div>
      </el-form-item>
    </el-form>

    <div class="button-create">
      <el-button type="primary" @click="createESPoi3D">开始创建</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ESPoi3D } from 'earthsdk3'
import { getobjm } from '@/utils/getobjm.js'
import { useTreeStore } from '@/stores/treeStore.js'
import { usePlottingStore } from '@/stores/plottingStore.js'
const plottingStore = usePlottingStore()
const treeStore = useTreeStore()
const objm = getobjm()

// 定义emit，用于通知父组件关闭配置面板
const emit = defineEmits(['close-panel'])

const properties = ref({
  style: {
    text: '3D标牌',
    UI_Color: '#00ff00', // 标牌颜色
    FX_Color: '#00ff00', //[0, 1, 0, 1], // 主体颜色
  },
  mode: 'triangle',
  scale: [1, 1, 1], //缩放
})

const poi3DTypeOptions = [
  { id: '1', value: 'triangle', label: '三角形' },
  { id: '2', value: 'diamond', label: '菱形' },
]
const createESPoi3D = () => {
  const sceneObjectESPoi3D = objm.createSceneObject(ESPoi3D)
  if (!sceneObjectESPoi3D) return
  // 创建一个新对象，避免修改原始数据
  const formattedData = {
    ...properties.value,
    style: {
      ...properties.value.style,
      // 转换颜色格式
      UI_Color: hexToRgbaArray(properties.value.style.UI_Color),
      FX_Color: hexToRgbaArray(properties.value.style.FX_Color),
    },
  }
  sceneObjectESPoi3D.style = formattedData.style
  sceneObjectESPoi3D.mode = formattedData.mode
  sceneObjectESPoi3D.scale = formattedData.scale
  sceneObjectESPoi3D.editing = true

  sceneObjectESPoi3D.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESPoi3D && sceneObjectESPoi3D.editing === false) {
      const position = sceneObjectESPoi3D.position
      const a = position[0] === 0 && position[1] === 0
      const json = sceneObjectESPoi3D.json
      objm.destroySceneObject(sceneObjectESPoi3D)
      setTimeout(() => {
        if (!a) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          plottingStore.createPlottingData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })

  emit('close-panel') //关闭配置面板
}

// 将十六进制颜色转换为归一化的RGBA数组 [r, g, b, a]
const hexToRgbaArray = (hex) => {
  // 移除 # 号
  hex = hex.replace('#', '')

  // 处理简写形式 (#RGB)
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
  }

  // 解析RGB值并归一化到0-1范围
  const r = parseInt(hex.substring(0, 2), 16) / 255
  const g = parseInt(hex.substring(2, 4), 16) / 255
  const b = parseInt(hex.substring(4, 6), 16) / 255

  // 返回带Alpha通道的数组
  return [r, g, b, 1]
}
</script>

<style lang="scss" scoped>
.label3d-panel {
  width: 280px;
  color: #ffffff;
  background-color: rgba(0, 8, 26, 0.8);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  border: 1px solid rgba(0, 195, 255, 0.6);
  padding: 8px;
}

.panel-title {
  font-size: 14px;
  color: #00c3ff;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 195, 255, 0.3);
}

:deep(.el-form-item__label) {
  color: #ffffff;
  font-size: 12px;
}

.color-picker-container {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
}

:deep(.el-color-picker__trigger) {
  border: 1px solid rgba(60, 60, 70, 0.8);
  height: 28px;
  width: 40px;
}

.color-input {
  flex: 1;
}

.color-block {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.size-inputs {
  display: flex;
  gap: 8px;
}

.size-input {
  width: calc(33.33% - 6px);
}

.full-width {
  width: 100%;
}

:deep(.el-input__wrapper),
:deep(.el-input-number__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(60, 60, 70, 0.8);
  box-shadow: none;
}

:deep(.el-input__inner) {
  color: #ffffff;
  height: 28px;
}

:deep(.el-select-dropdown) {
  background-color: rgba(30, 30, 40, 0.9);
  border: 1px solid rgba(60, 60, 70, 0.8);
}

:deep(.el-select-dropdown__item) {
  color: #ffffff;
}

:deep(.el-select-dropdown__item.selected) {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.2);
}

:deep(.el-select-dropdown__item:hover) {
  background-color: rgba(64, 158, 255, 0.1);
}

.button-create {
  margin-top: 15px;
  :deep(.el-button) {
    width: 100%;
    background-color: rgba(0, 195, 255, 0.2);
    border: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.6);
    color: #00c3ff;
    border-radius: 0.2083vw /* 4px -> .2083vw */;
    font-size: 0.625vw /* 12px -> .625vw */;
    height: 1.6667vw /* 32px -> 1.6667vw */;
    line-height: 1.6667vw /* 32px -> 1.6667vw */;
    margin: 0;
    &:hover {
      background-color: rgba(0, 195, 255, 0.4);
    }
  }
}
:deep(.el-form-item) {
  margin-bottom: 12px;
}

:deep(.el-input__clear) {
  color: rgba(255, 255, 255, 0.7);
  &:hover {
    color: #ffffff;
  }
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  background-color: rgba(30, 30, 40, 0.8);
  color: #ffffff;
  border-color: rgba(60, 60, 70, 0.8);
}
</style>
